<template>
  <div class="page flex-col justify-between">
    <div class="group_5 flex-row">
      <div class="group_6">
        <div class="box_1 flex-row">
          <span class="text_8">历史对话</span> <span class="text_9" @click="handleTip">全部</span>
          <img
            class="thumbnail_1"
            referrerpolicy="no-referrer"
            src="@/assets/icon-link.png"
          />
        </div>
        <div class="box_2 flex-row justify-between" @click="handleTip">
          <img
            class="thumbnail_2"
            referrerpolicy="no-referrer"
            src="@/assets/icon-add.png"
          />
          <span class="text_10">创建新对话</span>
        </div>
        <div class="text_11" v-for="item in historicalDialogue" :key="item.id">
          {{ item.text }}
        </div>
        <!-- <span class="text_11">1.双缝干涉实验：托马斯·杨用…</span>
        <span class="text_12">2.干涉现象验证实验</span>
        <span class="text_13">3.研究光的行为和性质</span>
        <div class="text-wrapper_3">
          <span class="text_14">4.折射定律验证实验</span>
          <span class="text_15">‌</span>
        </div>
        <span class="text_16">5.量子光学前沿实验</span>
        <span class="text_17">6.双缝实验是一种“双路径实验…</span>
        <span class="text_18">7.量子光学前沿实验</span>
        <span class="text_19">8.研究光的行为和性质</span>
        <span class="text_20">9.双缝实验是一种“双路径实验…</span>
        <span class="text_21">10.干涉现象验证实验</span> -->

        <div class="image_1"></div>
        <div class="box_3 flex-row justify-between">
          <span class="text_22">我的实验报告</span>
          <div class="image-text_1 flex-row justify-between" @click="handleTip">
            <span class="text-group_1">全部</span>
            <img
              class="thumbnail_3"
              referrerpolicy="no-referrer"
              src="@/assets/icon-link.png"
            />
          </div>
        </div>
        <div class="box_4 flex-row" v-for="item in reportList" @click="handleTip" :key="item.id">
          <div class="image-text_2 flex-row justify-between">
            <img
              class="label_2"
              referrerpolicy="no-referrer"
              src="@/assets/images/detail-title-icon.png"
            />
            <div class="text-group_2 flex-col justify-between">
              <div class="text-wrapper_4">
                <div class="text_23">{{ item.name }}</div>
              </div>
              <span class="text_25">生成日期：{{ item.date }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="group_7 flex-col">
        <span class="text_32">AI实验助手</span>
        <div class="group_8 flex-row justify-between">
          <div class="group_9 flex-row justify-between">
            <img
              class="label_5"
              referrerpolicy="no-referrer"
              src="/lanhu/SketchPnga0770e63485f33c501882560f2a9fb13e61d14c44f1dae853da8f59c5d4abfb3.png"
            />
            <span class="text_33">如何利用双缝装置证实光的波动性？</span>
          </div>
          <div class="group_10 flex-row justify-between">
            <img
              class="label_6"
              referrerpolicy="no-referrer"
              src="/lanhu/SketchPng70eb2fe0a431214e0b810046cdb7a7f31f8e4bf84c273b9d933df375527240e8.png"
            />
            <div class="text-wrapper_7">
              <span class="text_34">折射定律验证实验报告</span>
              <span class="text_35">‌</span>
            </div>
          </div>
          <div class="group_11 flex-row justify-between">
            <img
              class="label_7"
              referrerpolicy="no-referrer"
              src="/lanhu/SketchPng70eb2fe0a431214e0b810046cdb7a7f31f8e4bf84c273b9d933df375527240e8.png"
            />
            <span class="text_36">干涉现象验证实验报告</span>
          </div>
        </div>
        <div class="group_12 flex-row justify-between">
          <div class="box_7 flex-row justify-between">
            <div class="image-wrapper_1 flex-col">
              <img
                class="label_8"
                referrerpolicy="no-referrer"
                src="/lanhu/SketchPng70eb2fe0a431214e0b810046cdb7a7f31f8e4bf84c273b9d933df375527240e8.png"
              />
            </div>
            <span class="text_37">我需要详细的实验执行步骤</span>
          </div>
          <div class="box_8 flex-row" @click="handleTip">
            <img
              class="label_9"
              referrerpolicy="no-referrer"
              src="/lanhu/SketchPng8f009ca6fdb90a64373b844b240bcb4441bbb4c25c2da65b59d3c526a16c65df.png"
            />
            <span class="text_38">查看完整功能</span>
            <img
              class="thumbnail_4"
              referrerpolicy="no-referrer"
              src="@/assets/icon-link-blue.png"
            />
          </div>
        </div>
        <div class="dialogue" ref="cozeRef"></div>
        <div class="group_13 flex-col">
          <div class="box_9 flex-col">
            <a-textarea
              class="textarea_1"
              :rows="4"
              v-model="inputText"
              placeholder="请输入您的问题"
            />
            <div class="image-wrapper_2 flex-row" @click="handleTip">
              <img
                class="image_2"
                referrerpolicy="no-referrer"
                src="@/assets/icon-btn-send.png"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { message } from "ant-design-vue";
import { ref} from "vue";
const historicalDialogue = ref([
  {
    id: 1,
    text: "1.双缝干涉实验：托马斯·杨用双缝装置证实光的波动性",
  },
  // {
  //   id: 2,
  //   text: '2.干涉现象验证实验',
  // },
  {
    id: 3,
    text: "3.研究光的行为和性质",
  },
  {
    id: 4,
    text: "4.折射定律验证实验",
  },
  {
    id: 5,
    text: "5.量子光学前沿实验",
  },
  {
    id: 6,
    text: "6.双缝实验是一种“双路径实验…",
  },
  {
    id: 7,
    text: "7.量子光学前沿实验",
  },
  {
    id: 8,
    text: "8.研究光的行为和性质",
  },
  {
    id: 9,
    text: "9.双缝实验是一种“双路径实验…",
  },
  {
    id: 10,
    text: "10.干涉现象验证实验",
  },
]);
const handleTip = () => {
  message.warning("请登录后点击页面右下角的AI实验助手试用此功能");
};
const reportList = ref([
  {
    name: "折射定律验证实验报告",
    id: 1,
    date: "2025-04-23",
  },
  {
    name: "干涉现象验证实验报告",
    id: 2,
    date: "2025-04-23",
  },
  {
    name: "我需要详细的实验执行步骤",
    id: 3,
    date: "2025-04-23",
  },
]);
const inputText = ref("");

</script>
<style lang="less" scoped>
.page {
  background-color: rgba(251, 251, 251, 1);
  position: relative;
  width: 100%;
  height: calc(100% - 90px);
  overflow: hidden;

  .group_5 {
    width: 100%;
    height: 100%;
    overflow: auto;
    background: linear-gradient(180deg, #e7f1ff 0%, #ffffff 100%);

    .group_6 {
      width: 292px;
      height: 100%;
      overflow-y: auto;
      background: linear-gradient(
        206deg,
        rgba(217, 232, 255, 0.4) 0%,
        rgba(230, 240, 255, 0.4) 100%
      );

      .box_1 {
        width: 240px;
        height: 25px;
        margin: 26px 0 0 26px;

        .text_8 {
          width: 72px;
          height: 25px;
          overflow-wrap: break-word;
          color: rgba(38, 38, 38, 1);
          font-size: 18px;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          text-align: left;
          white-space: nowrap;
          line-height: 25px;
        }

        .text_9 {
          width: 32px;
          height: 22px;
          overflow-wrap: break-word;
          color: rgba(89, 89, 89, 1);
          font-size: 16px;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 22px;
          margin: 3px 0 0 116px;
          cursor: pointer;
        }

        .thumbnail_1 {
          width: 16px;
          height: 16px;
          margin: 6px 0 0 4px;
        }
      }

      .box_2 {
        box-shadow: 0px 8px 12px 0px rgba(17, 101, 237, 0.05);
        background-color: rgba(255, 255, 255, 1);
        border-radius: 4px;
        width: 240px;
        height: 48px;
        border: 1px solid rgba(230, 235, 241, 1);
        margin: 14px 0 0 26px;
        cursor: pointer;

        .thumbnail_2 {
          width: 20px;
          height: 20px;
          margin: 14px 0 0 66px;
        }

        .text_10 {
          width: 80px;
          height: 22px;
          overflow-wrap: break-word;
          color: rgba(38, 38, 38, 1);
          font-size: 16px;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 22px;
          margin: 13px 66px 0 0;
        }
      }

      .text_11 {
        height: 22px;
        overflow-wrap: break-word;
        color: rgba(89, 89, 89, 1);
        font-size: 16px;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 22px;
        margin: 6px 0 0 26px;
        white-space: nowrap;
        /* 防止文本换行 */
        overflow: hidden;
        /* 隐藏溢出的内容 */
        text-overflow: ellipsis;
        cursor: pointer;
        /* 使用省略号表示被截断的文本 */
      }

      .text_12 {
        width: 142px;
        height: 22px;
        overflow-wrap: break-word;
        color: rgba(89, 89, 89, 1);
        font-size: 16px;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 22px;
        margin: 6px 0 0 26px;
      }

      .text_13 {
        width: 158px;
        height: 22px;
        overflow-wrap: break-word;
        color: rgba(89, 89, 89, 1);
        font-size: 16px;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 22px;
        margin: 6px 0 0 26px;
      }

      .text-wrapper_3 {
        width: 142px;
        height: 22px;
        overflow-wrap: break-word;
        font-size: 0;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 22px;
        margin: 6px 0 0 26px;

        .text_14 {
          width: 142px;
          height: 22px;
          overflow-wrap: break-word;
          color: rgba(89, 89, 89, 1);
          font-size: 16px;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 22px;
        }

        .text_15 {
          width: 142px;
          height: 22px;
          overflow-wrap: break-word;
          color: rgba(89, 89, 89, 1);
          font-size: 16px;
          font-family: Helvetica;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 22px;
        }
      }

      .text_16 {
        width: 142px;
        height: 22px;
        overflow-wrap: break-word;
        color: rgba(89, 89, 89, 1);
        font-size: 16px;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 22px;
        margin: 6px 0 0 26px;
      }

      .text_17 {
        width: 231px;
        height: 22px;
        overflow-wrap: break-word;
        color: rgba(89, 89, 89, 1);
        font-size: 16px;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 22px;
        margin: 6px 0 0 26px;
      }

      .text_18 {
        width: 141px;
        height: 22px;
        overflow-wrap: break-word;
        color: rgba(89, 89, 89, 1);
        font-size: 16px;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 22px;
        margin: 6px 0 0 26px;
      }

      .text_19 {
        width: 158px;
        height: 22px;
        overflow-wrap: break-word;
        color: rgba(89, 89, 89, 1);
        font-size: 16px;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 22px;
        margin: 6px 0 0 26px;
      }

      .text_20 {
        width: 231px;
        height: 22px;
        overflow-wrap: break-word;
        color: rgba(89, 89, 89, 1);
        font-size: 16px;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 22px;
        margin: 6px 0 0 26px;
      }

      .text_21 {
        width: 149px;
        height: 22px;
        overflow-wrap: break-word;
        color: rgba(89, 89, 89, 1);
        font-size: 16px;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 22px;
        margin: 6px 0 0 26px;
      }

      .image_1 {
        width: 240px;
        height: 1px;
        background: #e6ebf1;
        margin: 20px 0 0 26px;
      }

      .box_3 {
        width: 240px;
        height: 25px;
        margin: 20px 0 0 26px;

        .text_22 {
          width: 108px;
          height: 25px;
          overflow-wrap: break-word;
          color: rgba(38, 38, 38, 1);
          font-size: 18px;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          text-align: left;
          white-space: nowrap;
          line-height: 25px;
        }

        .image-text_1 {
          width: 52px;
          height: 22px;
          margin-top: 3px;

          .text-group_1 {
            width: 32px;
            height: 22px;
            overflow-wrap: break-word;
            color: rgba(89, 89, 89, 1);
            font-size: 16px;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 22px;
            cursor: pointer;
          }

          .thumbnail_3 {
            width: 16px;
            height: 16px;
            margin-top: 3px;
          }
        }
      }

      .box_4 {
        background-color: rgba(255, 255, 255, 1);
        border-radius: 4px;
        width: 240px;
        height: 66px;
        margin: 16px 0 0 26px;

        .image-text_2 {
          width: 212px;
          height: 42px;
          cursor: pointer;
          margin: 12px 0 0 12px;

          .label_2 {
            width: 40px;
            height: 40px;
            margin-top: 1px;
          }

          .text-group_2 {
            width: 160px;
            height: 42px;

            .text-wrapper_4 {
              width: 160px;
              height: 22px;
              overflow-wrap: break-word;
              font-size: 0;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 22px;

              .text_23 {
                width: 160px;
                height: 22px;
                overflow-wrap: break-word;
                color: rgba(89, 89, 89, 1);
                font-size: 16px;
                font-weight: normal;
                text-align: left;
                white-space: nowrap;
                line-height: 22px;
                white-space: nowrap;
                /* 防止文本换行 */
                overflow: hidden;
                /* 隐藏溢出的内容 */
                text-overflow: ellipsis;
              }

              .text_24 {
                width: 160px;
                height: 22px;
                overflow-wrap: break-word;
                color: rgba(89, 89, 89, 1);
                font-size: 16px;
                font-family: Helvetica;
                font-weight: normal;
                text-align: left;
                white-space: nowrap;
                line-height: 22px;
              }
            }

            .text_25 {
              width: 133px;
              height: 16px;
              overflow-wrap: break-word;
              color: rgba(102, 102, 102, 1);
              font-size: 12px;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 16px;
              margin-top: 4px;
            }
          }
        }
      }

      .box_5 {
        background-color: rgba(255, 255, 255, 1);
        border-radius: 4px;
        width: 240px;
        height: 66px;
        margin: 16px 0 0 26px;

        .image-text_3 {
          width: 212px;
          height: 42px;
          margin: 12px 0 0 12px;

          .label_3 {
            width: 40px;
            height: 40px;
            margin-top: 1px;
          }

          .text-group_3 {
            width: 160px;
            height: 42px;

            .text-wrapper_5 {
              width: 160px;
              height: 22px;
              overflow-wrap: break-word;
              font-size: 0;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 22px;

              .text_26 {
                width: 160px;
                height: 22px;
                overflow-wrap: break-word;
                color: rgba(89, 89, 89, 1);
                font-size: 16px;
                font-weight: normal;
                text-align: left;
                white-space: nowrap;
                line-height: 22px;
              }

              .text_27 {
                width: 160px;
                height: 22px;
                overflow-wrap: break-word;
                color: rgba(89, 89, 89, 1);
                font-size: 16px;
                font-family: Helvetica;
                font-weight: normal;
                text-align: left;
                white-space: nowrap;
                line-height: 22px;
              }
            }

            .text_28 {
              width: 133px;
              height: 16px;
              overflow-wrap: break-word;
              color: rgba(102, 102, 102, 1);
              font-size: 12px;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 16px;
              margin-top: 4px;
            }
          }
        }
      }

      .box_6 {
        background-color: rgba(255, 255, 255, 1);
        border-radius: 4px;
        width: 240px;
        height: 66px;
        margin: 16px 0 224px 26px;

        .image-text_4 {
          width: 212px;
          height: 42px;
          margin: 12px 0 0 12px;

          .label_4 {
            width: 40px;
            height: 40px;
            margin-top: 1px;
          }

          .text-group_4 {
            width: 160px;
            height: 42px;

            .text-wrapper_6 {
              width: 160px;
              height: 22px;
              overflow-wrap: break-word;
              font-size: 0;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 22px;

              .text_29 {
                width: 160px;
                height: 22px;
                overflow-wrap: break-word;
                color: rgba(89, 89, 89, 1);
                font-size: 16px;
                font-weight: normal;
                text-align: left;
                white-space: nowrap;
                line-height: 22px;
              }

              .text_30 {
                width: 160px;
                height: 22px;
                overflow-wrap: break-word;
                color: rgba(89, 89, 89, 1);
                font-size: 16px;
                font-family: Helvetica;
                font-weight: normal;
                text-align: left;
                white-space: nowrap;
                line-height: 22px;
              }
            }

            .text_31 {
              width: 133px;
              height: 16px;
              overflow-wrap: break-word;
              color: rgba(102, 102, 102, 1);
              font-size: 12px;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 16px;
              margin-top: 4px;
            }
          }
        }
      }
    }

    .group_7 {
      flex: 1;
      overflow-y: auto;
      padding: 50px 112px 0 112px;
      box-sizing: border-box;
      display: flex;
      align-items: center;

      .text_32 {
        width: 150px;
        height: 42px;
        overflow-wrap: break-word;
        color: rgba(38, 38, 38, 1);
        font-size: 30px;
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        text-align: right;
        white-space: nowrap;
        line-height: 42px;
      }

      .group_8 {
        width: 956px;
        height: 48px;
        margin: 40px 0 0 0;

        .group_9 {
          background-color: rgba(255, 255, 255, 1);
          border-radius: 4px;
          width: 388px;
          height: 48px;
          border: 1px solid rgba(17, 101, 237, 1);

          .label_5 {
            width: 24px;
            height: 24px;
            margin: 12px 0 0 16px;
          }

          .text_33 {
            width: 320px;
            height: 28px;
            overflow-wrap: break-word;
            color: rgba(38, 38, 38, 1);
            font-size: 20px;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 28px;
            margin: 10px 16px 0 0;
          }
        }

        .group_10 {
          background-color: rgba(255, 255, 255, 1);
          border-radius: 4px;
          width: 268px;
          height: 48px;
          border: 1px solid rgba(230, 230, 230, 1);
          margin-left: 16px;

          .label_6 {
            width: 24px;
            height: 24px;
            margin: 12px 0 0 16px;
          }

          .text-wrapper_7 {
            width: 200px;
            height: 28px;
            overflow-wrap: break-word;
            font-size: 0;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 28px;
            margin: 10px 16px 0 0;

            .text_34 {
              width: 200px;
              height: 28px;
              overflow-wrap: break-word;
              color: rgba(38, 38, 38, 1);
              font-size: 20px;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 28px;
            }

            .text_35 {
              width: 200px;
              height: 28px;
              overflow-wrap: break-word;
              color: rgba(38, 38, 38, 1);
              font-size: 20px;
              font-family: Helvetica;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 28px;
            }
          }
        }

        .group_11 {
          background-color: rgba(255, 255, 255, 1);
          border-radius: 4px;
          width: 268px;
          height: 48px;
          border: 1px solid rgba(230, 230, 230, 1);
          margin-left: 16px;

          .label_7 {
            width: 24px;
            height: 24px;
            margin: 12px 0 0 16px;
          }

          .text_36 {
            width: 200px;
            height: 28px;
            overflow-wrap: break-word;
            color: rgba(38, 38, 38, 1);
            font-size: 20px;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 28px;
            margin: 10px 16px 0 0;
          }
        }
      }

      .group_12 {
        width: 536px;
        height: 48px;
        margin: 16px 0 0 0;

        .box_7 {
          background-color: rgba(255, 255, 255, 1);
          border-radius: 4px;
          width: 308px;
          height: 48px;
          border: 1px solid rgba(230, 230, 230, 1);

          .image-wrapper_1 {
            background-color: rgba(140, 29, 235, 1);
            border-radius: 12px;
            height: 24px;
            width: 24px;
            margin: 12px 0 0 16px;

            .label_8 {
              width: 24px;
              height: 24px;
            }
          }

          .text_37 {
            width: 240px;
            height: 28px;
            overflow-wrap: break-word;
            color: rgba(38, 38, 38, 1);
            font-size: 20px;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 28px;
            margin: 10px 16px 0 0;
          }
        }

        .box_8 {
          background-color: rgba(222, 235, 255, 1);
          border-radius: 4px;
          width: 212px;
          height: 48px;
          cursor: pointer;
          border: 1px solid rgba(173, 205, 255, 1);

          .label_9 {
            width: 28px;
            height: 28px;
            margin: 10px 0 0 16px;
          }

          .text_38 {
            width: 120px;
            height: 28px;
            overflow-wrap: break-word;
            color: rgba(17, 101, 237, 1);
            font-size: 20px;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 28px;
            margin: 10px 0 0 8px;
          }

          .thumbnail_4 {
            width: 20px;
            height: 20px;
            margin: 14px 14px 0 6px;
          }
        }
      }

      .dialogue {
        width: 956px;
        flex: 1;
        overflow: auto;
      }

      .group_13 {
        height: 179px;
        background: linear-gradient(180deg, #ffffff 0%, #e7f1ff 100%);
        margin-top: 20px;
        width: 956px;
        border-radius: 10px;

        .box_9 {
          height: 177px;
          background: linear-gradient(180deg, #ffffff 0%, #e7f1ff 100%);
          width: 100%;
          margin: 1px 0 0 1px;
          position: relative;
          overflow: hidden;

          .textarea_1 {
            padding: 20px;
            width: 100%;
            height: 100%;
            background-color: transparent;
            margin: 0 auto;
            overflow-wrap: break-word;
            font-size: 24px;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 33px;
          }

          // .text-wrapper_8 {
          //   width: 168px;
          //   height: 33px;
          //   margin: 20px 0 0 20px;

          //   .text_39 {
          //     width: 168px;
          //     height: 33px;
          //     overflow-wrap: break-word;
          //     color: rgba(191, 191, 191, 1);
          //     font-size: 24px;
          //     font-weight: normal;
          //     text-align: left;
          //     white-space: nowrap;
          //     line-height: 33px;
          //   }

          // }

          .image-wrapper_2 {
            width: 70px;
            height: 70px;
            background: #1165ed;
            border-radius: 50%;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            bottom: 20px;
            right: 20px;
            cursor: pointer;

            .image_2 {
              width: 48px;
              height: 48px;
            }
          }
        }
      }
    }
  }
}
</style>
